<template>
  <div class="insertFood">
      <div class="insertFood-item">
          <div class="insertFoodName">
              标题  
          </div>
          <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
      </div>
      
      <div class="adminUpdate-item">
          <div class="insertFoodName">内容   </div>
          <div class="adminTextarea">
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 6}"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="300"
              show-word-limit
              >
          </el-input>  -->
          <quill-editor
            placeholder="请输入内容"
            v-model="textarea"
            @change="onEditorChange($event)"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)">
            </quill-editor>
          </div>
      </div>

      <div class="insertFood-item">
          <div class="insertFoodName">
              图片  
          </div>
          <div class="insertFoodImg">
              <img :src="list" alt="" v-if="list">
              <div class="insertText" @click="updateImg" v-else>点击添加</div>
          </div>
      </div>


      <div class="adminUpdate-item">
        <div class="adminWanCheng">
          <el-button @click="complete" type="primary">完成</el-button>
        </div>
      </div>

    <div v-if="updateOut">
      <update-food-img v-on:childByOut="childByOut"  v-on:childImg="childImg"></update-food-img>
    </div>
  </div>
</template>

<script>
import UpdateFoodImg from '../updateimg/UpdateFoodImg.vue';
import { request } from "../../network/request";
export default {
  components: { UpdateFoodImg },
    name:'InsertColl',
    data() {
      return {
         input:'',
         input2:'',
         textarea:'',
         panImg:true,
         updateOut:'',
         list:''
      }
    },
    methods: {
        childByOut: function (childValue) {
        this.updateOut = childValue
        console.log(this.updateOut);
      },
      childImg: function (childValue) {
            this.list = childValue
            console.log(this.list);
        },
      updateImg() {
            this.updateOut = true;
      },
      onEditorChange(){   //值发生改变

            console.log(this.textarea);
        },
      onEditorBlur(){   //失去焦点时
        },
      onEditorFocus(){    //获取焦点

      },
      complete(){
        request({
            url: "/foodmatching/addFoodMatching",
            params:{
                fmContent:this.textarea,
                fmImg:this.list,
                fmTile:this.input,
                }
            }).then((res) => {
                console.log(res);
                this.$alert('添加成功','提示' ,{
                    confirmButtonText: '确定',
                    callback: () => {
                        location.reload()
                    }
                  });

                })
                .catch((err) => {
                    console.log(err);
                });
      }
    },
}
</script>

<style>

</style>